import React, { memo } from 'react';
import { Button, Radio, Tooltip } from 'antd';
import classNames from 'classnames';
import { history } from 'umi'

import AuthComponent from '@/utils/auth/AuthComponent';

import salaryStyles from '@/pages/SalaryManage/salaryManage.less';

const MenuRight = ({ period, nowPath, type, organizationCode, overviewUrl, detailUrl, logUrl }) => {
    const goToExcelOverview = () => {
        if (nowPath === overviewUrl) {
            return
        }
        history.push({
            pathname: overviewUrl,
            state: {
                tabRoute: true,
                tabRefresh: true
            },
            query: {
                organizationCode,
                year: period && period.substr(0, 4),
                month: period && period.substr(5)
            }
        });
    };

    const goToExcelDetail = () => {
        if (nowPath === detailUrl) {
            return
        }
        history.push({
            pathname: detailUrl,
            state: {
                tabRoute: true,
                tabRefresh: true
            },
            query: {
                organizationCode,
                year: period && period.substr(0, 4),
                month: period && period.substr(5)
            }
        });
    };

    const goToExcelLog = () => {
        history.push({
            pathname: logUrl,
            query: {
                organizationCode
            },
            state: {
                tabRoute: true,
                tabRefresh: true
            }
        });
    };

    return (
        <div>
            <Radio.Group className={classNames(salaryStyles.switchRadio, salaryStyles.mr8)} value={type}>
                <AuthComponent code="finance:salary:computation:send:export:collect">
                    <Tooltip title="总览">
                        <Radio.Button value="overview" onClick={goToExcelOverview}>
                            <i className="icon iconfont iconzonglan" />
                        </Radio.Button>
                    </Tooltip>
                </AuthComponent>
                <AuthComponent code="finance:salary:computation:send:export:detail">
                    <Tooltip title="详细">
                        <Radio.Button value="detail" onClick={goToExcelDetail}>
                            <i className="icon iconfont iconxiangxi" />
                        </Radio.Button>
                    </Tooltip>
                </AuthComponent>
            </Radio.Group>
            <Button onClick={goToExcelLog}>操作日志</Button>
        </div>
    );
};

MenuRight.displayName = 'TabsMenuRight';

export default memo(MenuRight);
